import React, { PureComponent }from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
import { Redirect } from 'dva/router';

import MyCalendar from '../components/MyCalendar';
import PCOperator from '../components/operator';
import MobileOperator from '../components/mobileOperator';
import styles from './IndexPage.less';

class IndexPage extends PureComponent {
  constructor(props){
    super(props);
    this.state={
      onSelectDate: [],
      clickType: 'holiday',
      showMobileOperator: false,
    }
  }
  setDate = (data) => {
    const array = [];
    this.setState({onSelectDate: array.concat(data)});
  };
  render() {
    const { onSelectDate } = this.state;
    const { history, location } = this.props;
    const clickType = location.pathname.split('/')[1];
    if(location.pathname === '/') {
      return (
        <Redirect to='/holiday/add'/>
      )
    }
    return(
     <div style={{ height: '100%'}}>
       <div className={styles.mobileNav}>日历</div>
       <div style={{ padding: '7px'}}>
         <div className={styles.wrapper}>
           <div  className={styles.calendarWrapper}>
             <div className={styles.buttonsWrapper}>
               <div className={styles.buttons}>
                 <Button onClick={() => history.push('/holiday/add')} type={clickType === 'holiday' ? 'primary' : ''}>请假</Button>
                 <Button onClick={() => history.push('/bookfood/add')} type={clickType === 'bookfood' ? 'primary' : ''}>点餐</Button>
               </div>
             </div>
             <MyCalendar clickType={clickType} onChange={this.setDate}/>
           </div>
           <div className={styles.pcOperatorWrapper}>
             <PCOperator onSelectDate={onSelectDate} clickType={clickType}/>
           </div>
        </div>
       </div>
       <div className={styles.showMobileOperator}>
         <Button onClick={() => {this.setState({showMobileOperator: !this.state.showMobileOperator})}} style={{ width: '100%'}} type='primary'>确定日期</Button>
       </div>
       <div style={{ display: this.state.showMobileOperator ? 'block' : 'none'}} className={styles.mobileOperator}>
         <MobileOperator onSelectDate={onSelectDate} goBack={() => {this.setState({showMobileOperator: !this.state.showMobileOperator})}}/>
       </div>
     </div>
    );
  }
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);
